<!-- 唐礼飞  2020-10-19 10:12:58  -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录-网盘</title>
<%@include file="include/css.jsp"%>

<style type="text/css">
html, body {
	height: 100%;
	width: 100%;
}

body {
	background:
		url("${pageContext.request.contextPath}/static/resources/images/login_bg.jpg")
		no-repeat center fixed;
	background-size: cover;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.login-card {
	width: 600px;
}

#captcha-img {
	height: 35px;
}
</style>

</head>
<body>
	<div class="card login-card">
		<div class="card-header text-center">
			<h1>网盘</h1>
		</div>
		<div class="card-body">
			<form>
				<div class="form-group">
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text"> <i class="fas fa-user"></i>
							</span>
						</div>
						<input type="text" class="form-control" id="user" name="user"
							placeholder="请输入用户名" autocomplete="off" required autofocus>
					</div>
				</div>
				<div class="form-group">
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text"> <i class="fas fa-lock"></i>
							</span>
						</div>
						<input type="password" class="form-control" id="password"
							name="password" placeholder="请输入密码" required>
					</div>
				</div>
				<div class="form-group">
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text"> <i class="fas fa-image"></i>
							</span>
						</div>
						<input type="text" class="form-control" id="captcha"
							name="captcha" placeholder="请输入验证码" required autocomplete="off"
							maxlength="5">
						<div class="input-group-append">
							<span class="input-group-text" style="padding: 0px;"> <img
								id="captcha-img" alt="验证码图片" style="cursor: pointer;"
								onclick="changeCaptcha()"
								src="${pageContext.request.contextPath}/captcha">
							</span>
						</div>
					</div>
				</div>
				<div class="form-group text-right">
					<a href="javascript:changeCaptcha();">看不清验证码，点我换一个</a>
				</div>
				<div class="form-group">
					<button type="button" class="btn btn-primary btn-block btn-lg"
						id="login-button">登录</button>
				</div>
				<div class="form-group text-right">
					<a href="${pageContext.request.contextPath}/user/register">没有账号，注册...</a>
				</div>
			</form>
			<div style="color: red;">${requestScope.message}</div>
		</div>
	</div>
	<%@include file="include/js.jsp"%>
	<script type="text/javascript">
		function changeCaptcha() {
			$("#captcha-img").attr(
					"src",
					"${pageContext.request.contextPath}/captcha?time="
							+ new Date().getTime());
		}
		$(function() {
			$("#login-button")
					.click(
							function() {
								v = $("#user").val();
								if (v == "") {
									alert("请输入用户名！");
									return;
								}
								v = $("#password").val();
								if (v == "") {
									alert("请输入密码！");
									return;
								}
								v = $("#captcha").val();
								if (v == "") {
									alert("请输入验证码！");
									return;
								}
								$
										.ajax({
											url : "${pageContext.request.contextPath}/user/login",
											type : "POST",
											data : {
												name : $("#user").val(),
												password : $("#password").val(),
												captcha : $("#captcha").val()
											},
											dataType : "json",
											success : function(result) {
												if (result.code === 0) {
													window.location.href = "${pageContext.request.contextPath}/main";
												} else {
													changeCaptcha();
													alert(result.message);
												}
												$("#captcha").val("");
											},
											error : function(err) {
												alert("用户登录失败！");
												console.log(err);
											}
										});
							});
		});
	</script>
</body>
</html>